<template>
  <q-scroll-area class="fit">
    <div class="q-pa-sm">
      <tables-basic></tables-basic>

      <table-actions class="q-mt-lg"></table-actions>

      <table-dark-mode class="q-mt-lg"></table-dark-mode>

      <table-progress class="q-mt-lg"></table-progress>

      <table-custom-grid class="q-mt-lg"></table-custom-grid>
    </div>
  </q-scroll-area>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

const TableProgress = defineAsyncComponent(
  () => import('components/tables/TableProgress.vue')
);
const TableCustomGrid = defineAsyncComponent(
  () => import('components/tables/TableCustomGrid.vue')
);
const TableDarkMode = defineAsyncComponent(
  () => import('components/tables/TableDarkMode.vue')
);
const TableActions = defineAsyncComponent(
  () => import('components/tables/TableActions.vue')
);
const TablesBasic = defineAsyncComponent(
  () => import('components/tables/TableBasic.vue')
);
</script>

<style></style>
